<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/head"></head>
<title>系统设置</title>
<link rel="stylesheet" th:href="@{/lib/editormd/editormd.min.css}">
<link rel="stylesheet" th:href="@{/admin/css/setting.css}">
<body>
<!-- vue入口 -->
<div id="app">
    <div :class="'app-wrapper' + sidebarFlag">
        <!-- aside -->
        <div th:replace="admin/common/side"></div>

        <!-- container -->
        <el-container class="main-container">
            <!-- header -->
            <div style="background-color: rgb(84, 92, 100);" th:replace="admin/common/header"></div>

            <!-- main -->
            <el-main class="app-main">
                <el-card>
                    <blockquote>基础设置</blockquote>
                    <br/>
                    <el-row :gutter="80">
                        <el-col :span="12">
                            <el-card class="card-category">
                                <div slot="header">
                                    <span>全局设置</span>
                                </div>
                                <div>
                                    <el-form ref="form" :model="setting" label-width="80px">
                                        <el-form-item required prop="siteName"
                                                      :rules="[{ required: true, message: '请输入站点名称'}]" label="网站名称">
                                            <el-input placeholder="请输入站点名称" v-model="setting.siteName"></el-input>
                                        </el-form-item>
                                        <el-form-item required prop="siteMusic"
                                                      :rules="[{ required: true, message: '请输入音乐ID'}]" label="音乐ID">
                                            <el-input placeholder="请输入音乐ID" v-model="setting.siteMusic"></el-input>
                                        </el-form-item>
                                        <el-form-item label="社交连接" v-for="item in setting.siteLinks">
                                            <el-input placeholder="连接名称" v-model="item.key">
                                                <template slot="prepend">Key</template>
                                            </el-input>
                                            <el-input placeholder="连接URL" v-model="item.value">
                                                <template slot="prepend">Http://</template>
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button @click="update('form')" type="primary" style="float:right;">保存设置</el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card class="card-tags">
                                <div slot="header">
                                    <span>捐赠信息</span>
                                </div>
                                <div>
                                    <el-form label-width="100px">
                                        <el-form-item>
                                            <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition">
                                                <div class="el-table__header-wrapper">
                                                    <table cellspacing="0" cellpadding="0" border="0"
                                                           class="el-table__header" style="width: 686px;">
                                                        <thead>
                                                        <tr>
                                                            <th v-for="item in setting.siteDonation" colspan="1" rowspan="1" class="el-table_column">
                                                                <div class="cell">{{item.key}}</div>
                                                            </th>
                                                        </tr>
                                                        </thead>
                                                    </table>
                                                </div>
                                                <div class="el-table__body-wrapper is-scrolling-none">
                                                    <table cellspacing="0" cellpadding="0" border="0"
                                                           class="el-table__body" style="width: 686px;">
                                                        <tbody>
                                                        <tr class="el-table__row">
                                                            <td v-for="item in setting.siteDonation" class="el-table_column">
                                                                <div class="cell">
                                                                    <div class="avatar-uploader">
                                                                        <div @click="handleEditAvatar(item.key)" class="el-upload">
                                                                            <img v-if="item.value" :src="item.value" class="avatar" width="200" height="400">
                                                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <br/>
                    <blockquote>关于我</blockquote>
                    <br/>
                    <div id="article">
                        <textarea id="article-editor-md" ref="articleEditorMd" name="article-editor-md" v-model="setting.aboutMd"></textarea>
                    </div>
                    <br/>
                    <div style="float: right;margin-bottom: 15px;">
                        <el-row :gutter="20">
                            <el-col :xs="24" :sm="24" :lg="24" :span="12">
                                <el-button @click="update('form')" type="primary" style="float:right;">保存设置</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </div>
    <el-dialog title="上传图片" :visible.sync="avatarDialog" width="40%" :before-close="handleClose" :close-on-press-escape="false" :close-on-click-modal="false">
        <div class="modal-body">
            <form>
                <div class="row default_avatars_list">
                    <img v-for="item in avatarList" :src="item.url" @click="changeAvatar(item.url)" title="点击更换！">
                </div>
            </form>
            <el-upload class="avatar-uploader"
                       :action="localUpload"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
                <img v-if="donation.value" :src="donation.value" class="avatar" height="200px">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div v-if="!donation.value" class="el-upload__text">点我上传本地头像</div>
            </el-upload>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button @click="avatarDialog = false">取 消</el-button>
    </span>
    </el-dialog>
</div>
</body>
<script type="text/javascript" th:src="@{/lib/editormd/jquery-3.3.1.min.js}"></script>
<div th:replace="admin/common/js"></div>
<script type="text/javascript" th:src="@{/lib/editormd/editormd.min.js}"></script>
<script type="text/javascript" th:src="@{/admin/js/setting.js}"></script>
<script type="text/javascript">
    /**
     * Markdown工具配置
     */
    var markdownContent = editormd('article', {
        htmlDecode: true,
        width: '100%',
        height: 540,
        syncScrolling: "single",
        path: '../../../lib/editormd/lib/',
        saveHTMLToTextarea: true,

        emoji: true,
        watch: false,
        codeFold: true,
        taskList: true,
        tex: true, // 默认不解析
        flowChart: true, // 默认不解析
        sequenceDiagram: true, // 默认不解析

        toolbarIcons: function () {
            return ["undo", "redo", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "|", "list-ul", "list-ol", "|", "link", "reference-link", "image", "code", "preformatted-text", "table", "datetime", "emoji", "html-entities", "goto-line", "|", "preview", "fullscreen", "", "||", "watch"];
        },
    });
</script>
</html>
